<template>
    <div class="main">
        <div v-if="rightsButtons['add']" class="filter-container">
            <el-button type="success" icon="el-icon-plus" class="filter-item fr" @click="showAdd">新建</el-button>
        </div>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="秒杀ID" prop="crushId"></el-table-column>
            <el-table-column align="center" label="开始时间">
                <template slot-scope="scope">
                    <span v-text="formatDate(scope.row.starttime, 'YYYY-MM-DD HH:mm:ss')"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="结束时间">
                <template slot-scope="scope">
                    <span v-text="formatDate(scope.row.endtime, 'YYYY-MM-DD HH:mm:ss')"></span>
                </template>
            </el-table-column>
            <!--<el-table-column align="center" label="排序" prop="sort" width="100"></el-table-column>-->
            <el-table-column align="center" label="是否启用" width="150">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status"
                            @change="updateStatus(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="是"
                            inactive-text="否"
                            :active-value="1"
                            :inactive-value="0"
                            :disabled="!rightsButtons['operate']">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" v-if="rightsButtons['edit'] || rightsButtons['goodsList']">
                <template slot-scope="scope">
                    <el-button v-if="rightsButtons['edit']" type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                    <router-link v-if="rightsButtons['goodsList']" :to="{name: 'activitySecKillGoodsList', params: {id: scope.row.crushId}, query: { start: scope.row.starttime }}">
                        <el-button type="primary" plain size="mini">商品管理</el-button>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container" v-if="listTotal > 0">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex" :page-size="listQuery.pageSize" :total="listTotal" layout="total, prev, pager, next, jumper"></el-pagination>
        </div>
        <el-dialog :title="editItem.id ? '编辑秒杀' : '新建秒杀'" :visible.sync="showEditPop">
            <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
                <el-form-item label="起止时间:" prop="timeRange">
                    <el-date-picker
                            v-model="editItem.timeRange"
                            type="datetimerange"
                            range-separator="~"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <!--<el-form-item label="排序:">
                    <el-input v-model.number="editItem.sort" type="number"></el-input>
                </el-form-item>-->
                <el-form-item label="是否启用:">
                    <el-switch
                            v-model="editItem.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                <el-button @click="showEditPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'activitySecKill',
        data(){
            return {
                listLoading: false,
                listQuery: {
                    pageIndex: 1,
                    pageSize: 10,
                    isPage: 1
                },
                list: [],
                listTotal: 0,
                showEditPop: false,
                btnDisabled: false,
                editItem: {
                    timeRange: [],
                    sort: 1,
                    status: 0
                },
                editRule: {

                }
            }
        },
        created(){
            this.getList();
        },
        methods: {
            getList(){
                this.listLoading = true;
                this.request({
                    url: '/bsnl-product/crush/list',
                    method: 'get',
                    params: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            updateStatus(item){
                this.request({
                    url: '/bsnl-activity/crush/update',
                    method: 'post',
                    data: item
                }).then(() => {
                    this.$message.success(item.status === 1 ? '启用成功' : '禁用成功');
                }).catch(err => {
                    this.$message.error(err);
                });
            },
            showAdd(){
                this.editItem = {
                    timeRange: [],
                    sort: 1,
                    status: 0
                };
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            showEdit(item){
                this.editItem = {
                    ...item,
                    timeRange: [item.starttime, item.endtime]
                };
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            save(){
                this.$refs.editItem.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let url = this.editItem.id ? '/bsnl-activity/crush/update' : '/bsnl-activity/crush/create';
                    let timeRange = this.editItem.timeRange;
                    if (timeRange && timeRange.length > 0) {
                        this.editItem.starttime = this.formatDate(timeRange[0], 'YYYY-MM-DD HH:mm:ss');
                        this.editItem.endtime = this.formatDate(timeRange[1], 'YYYY-MM-DD HH:mm:ss');
                    }
                    this.btnDisabled = true;
                    this.request({
                        url,
                        method: 'post',
                        data: this.editItem
                    }).then(() => {
                        this.btnDisabled = false;
                        this.editItem = {};
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnDisabled = false;
                    });
                });
            },
            handleCurrentChange(val){
                this.listQuery.pageIndex = val;
                this.getList();
            },
            handleSizeChange(val){
                this.listQuery.pageSize = val;
                this.getList();
            }
        }
    }
</script>

<!--
<template>
    <div class="main">
        <div class="filter-container">
            &lt;!&ndash;<el-input @keyup.enter.native="search" class="filter-item" placeholder="按名称搜索" v-model="params.name"></el-input>&ndash;&gt;
            &lt;!&ndash;<el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>&ndash;&gt;
            <el-button type="success" icon="el-icon-plus" class="filter-item fr" @click="showAdd">新建</el-button>
        </div>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
            &lt;!&ndash;<el-table-column align="center" label="类型">
                <template slot-scope="scope">
                    <span v-text="types[scope.row.type]"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="跳转名称" prop="goodsName"></el-table-column>&ndash;&gt;
            <el-table-column align="center" label="开始时间">
                <template slot-scope="scope">
                    <span v-text="formatDate(scope.row.starttime, 'YYYY-MM-DD HH:mm:ss')"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="结束时间">
                <template slot-scope="scope">
                    <span v-text="formatDate(scope.row.endtime, 'YYYY-MM-DD HH:mm:ss')"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="排序" prop="sort" width="100"></el-table-column>
            <el-table-column align="center" label="是否启用" width="150">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        @change="updateStatus(scope.row)"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="是"
                        inactive-text="否"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                    <router-link :to="{name: 'activityScekillGoodsList', params: {id: scope.row.id}}">
                        <el-button type="primary" plain size="mini">商品管理</el-button>
                    </router-link>

                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container" v-if="total > 0">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="pageSize" :total="total" layout="total, prev, pager, next, jumper"></el-pagination>
        </div>
        <el-dialog :title="editItem.id ? '编辑商品秒杀' : '新建商品秒杀'" :visible.sync="showEditPop">
            <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
                &lt;!&ndash;<el-form-item label="类型:" prop="type">
                    <el-radio v-for="(name, val) in types" v-model="editItem.type" :label="val" :key="val" @change="chooseType">{{name}}</el-radio>
                </el-form-item>
                <el-form-item :label="`跳转${types[editItem.type]}:`" prop="goodsId">
                    <span v-text="jumpCheck.name"></span>
                    <el-button type="primary" plain @click="chooseJump">请选择</el-button>
                </el-form-item>&ndash;&gt;
                <el-form-item label="起止时间:" prop="timeRange">
                    <el-date-picker
                        v-model="editItem.timeRange"
                        type="datetimerange"
                        range-separator="~"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="editItem.sort" type="number"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-switch
                        v-model="editItem.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                <el-button @click="showEditPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: 'activityQualityList',
        data() {
            return {
                list: [],
                params: {
                    name: ''
                },
                query: {},
                types: {
                    '1': '商品',
                    '2': '套餐',
                },
                page: 1,
                pageSize: 20,
                total: 0,
                editItem: {},
                jumpCheck: {},
                editRule: {
                    type: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                    goodsId: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                    timeRange: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                },
                showEditPop: false,
                listLoading: false,
                btnDisabled: false,
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-activity/crush/list',
                    method: 'get',
                    params: {
                        pageIndex: this.page,
                        pageSize: this.pageSize,
                        isPage: 1
                    }
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.total = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.total = 0;
                    this.listLoading = false;
                });
            },
            // 显示新建
            showAdd() {
                this.editItem = {
                    type: '1',
                    goodsId: '',
                    sort: 1,
                    status: 0,
                    timeRange: []
                };
                this.jumpCheck = {};
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            // 显示编辑
            showEdit(item) {
                const {id, type, goodsId, goodsName, sort, status, starttime, endtime} = item;
                this.editItem = {
                    id,
                    type: type + '',
                    goodsId,
                    sort,
                    status,
                    timeRange: [starttime, endtime]
                };
                this.jumpCheck = {
                    id: goodsId,
                    name: goodsName
                };
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            // 启用/禁用
            updateStatus(item) {
                const {id, type, goodsId, sort, status, starttime, endtime} = item;
                this.request({
                    url: '/bsnl-activity/crush/update',
                    method: 'post',
                    data: {
                        id,
                        type,
                        goodsId,
                        sort,
                        status,
                        starttime,
                        endtime
                    }
                }).then(() => {
                    this.$message.success(status == 1 ? '启用成功' : '禁用成功');
                }).catch(err => {
                    this.$message.error(err);
                });
            },
            // 保存
            save() {
                this.$refs.editItem.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let url = this.editItem.id ? '/bsnl-activity/crush/update' : '/bsnl-activity/crush/create';
                    let [start, end] = ['', ''];
                    let timeRange = this.editItem.timeRange;
                    if (timeRange && timeRange.length > 0) {
                        // start = this.formatDate(timeRange[0], 'YYYY-MM-DD HH:mm:ss');
                        // end = this.formatDate(timeRange[1], 'YYYY-MM-DD HH:mm:ss');
                        start = timeRange[0];
                        end = timeRange[1];
                    }
                    this.btnDisabled = true;
                    this.request({
                        url,
                        method: 'post',
                        data: {
                            ...this.editItem,
                            starttime: start,
                            endtime: end
                        }
                    }).then(() => {
                        this.btnDisabled = false;
                        this.editItem = {};
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnDisabled = false;
                    });
                });
            },
            chooseType() {
                this.jumpCheck = {};
                this.editItem.goodsId = '';
            },
            chooseJump() {
                if(this.editItem.type == 1){
                    this.checkGoods([this.jumpCheck], 1).then(val => {
                        this.jumpCheck = val[0];
                        this.editItem.goodsId = this.jumpCheck.id;
                    });
                    return false;
                }
                if(this.editItem.type == 2){
                    this.checkPackage([this.jumpCheck], 1).then(val => {
                        this.jumpCheck = val[0];
                        this.editItem.goodsId = this.jumpCheck.id;
                    });
                    return false;
                }
            },
            // 搜索
            search() {
                this.page = 1;
                this.query = {
                    ...this.params
                };
                this.getList();
            },
            // 切换分页
            handleCurrentChange(page) {
                this.page = page;
                this.getList();
            },
        },
    }
</script>-->
